<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="js/bootstrap/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <ol class="breadcrumb">
            <li><a href="#">个人主页</a></li>
            <li><a href="QueryScore.html">成绩查询</a></li>
            <li>添加成绩</li>
        </ol>
        <h3 class="page-header">增加新成绩</h3>
        <form class="form-horizontal">
            <div class="form-group">
                <label class="col-sm-2">学生学号:</label>
                <div class="col-sm-8">
                    <input type="text" placeholder="请输入学生学号" class="form-control" v-model="score.sno">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2">学生姓名:</label>
                <div class="col-sm-8">
                    <input type="text" placeholder="请输入学生姓名" class="form-control" v-model="score.sname">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2">课程号:</label>
                <div class="col-sm-8">
                    <input type="text" placeholder="请输入课程号" class="form-control" v-model="score.cno">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2">课程成绩:</label>
                <div class="col-sm-8">
                    <input type="text" placeholder="请输入该课程成绩" class="form-control" v-model="score.score">
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-8 col-sm-offset-2">
                    <input type="button" value="添加成绩" class="btn btn-success" @click="addScore">
                    <input type="reset" value="重置" class="btn btn-danger">
                </div>
            </div>
        </form>
    </div>
    <script src="js/vue/vue2.5.js"></script>
    <script src="js/vue/axios.min.js"></script>
    <script src="js/jquery.js"></script>
    <script src="js/layer/layer.js"></script>
    <script>
        new Vue({
            el:'.container' ,
            data:{
                score:{
                    sno:'',
                    sname:'',
                    cno:'',
                    cname:'概率论',
                    score:''
                }
            },
            methods:{
                //添加成绩
                addScore(){
                    if(!this.checkForm()) return;
                    axios.get('/course/get',{params: {cno:this.score.cno}})
                        .then(resp =>{
                            this.score.cname = resp.data.cname;
                            //向服务器发出ajax请求 增加部门
                            axios.get('/score/add',{params:this.score})
                                .then(resp =>{
                                    console.log(this.score);
                                    layer.msg('添加成绩成功！');
                                    setTimeout(()=>{
                                        location.href='QueryScore.html';
                                    },500);
                                })
                        })

                },
                //表单验证
                checkForm() {
                    //验证学生学号
                    let r = /^.{3}$/;
                    if(!r.test(this.score.sno)) {
                        layer.alert('学号必须为三位！如：001');
                        return false;
                    }
                    //验证课程号
                    r = /^.{3}$/;
                    if(!r.test(this.score.cno)) {
                        layer.alert('课程号必须为三位！如：001');
                        return false;
                    }
                    //验证成绩
                    r = /^([0-9]|[1-9][0-9]|100)$/;
                    if(!r.test(this.score.score)) {
                        layer.alert('成绩的范围必须为0~100！');
                        return false;
                    }
                    return true;
                }
            }
        });
    </script>
</body>
</html>